<template>
  <div class="portContainer">
    <!-- 表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="创建时间">
        <el-input v-model="formInline.indate" placeholder="创建时间"></el-input>
      </el-form-item>
      <el-form-item label="客户姓名">
        <el-input v-model="formInline.name" placeholder="客户姓名"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.usestate" placeholder="请选择">
          <el-option label="生效中" value="生效中"></el-option>
          <el-option label="已确认" value="已确认"></el-option>
          <el-option label="已过期" value="已过期"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          icon="el-icon-search"
          @click="searchUser"
        ></el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click="isShowAdd"
          >新增报备</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" height="450px">
      <el-table-column
        align="center"
        type="index"
        width="100"
        label="序号"
      ></el-table-column>
      <el-table-column align="center" prop="time" label="创建时间" width="150">
      </el-table-column>
      <el-table-column align="center" prop="name" label="客户姓名" width="120">
      </el-table-column>
      <el-table-column align="center" prop="phone" label="联系电话" width="120">
      </el-table-column>
      <el-table-column
        align="center"
        prop="source"
        label="报备来源"
        width="120"
      >
      </el-table-column>
      <el-table-column align="center" prop="indate" label="有效期" width="120">
      </el-table-column>
      <el-table-column align="center" prop="usestate" label="状态" width="120">
      </el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="{ row }">
          <el-button size="mini" @click="isShowUpdata(row)">编辑</el-button>
          <el-popconfirm
            :title="`确定删除${row.name}吗?`"
            @onConfirm="detaleuser(row._id)"
          >
            <el-button type="danger" size="mini" slot="reference"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="25"
        layout="total, sizes, prev, pager, next, jumper"
        :total="40"
        background
        align="center"
      >
      </el-pagination>
    </div>
    <!-- 添加/修改 -->
    <el-dialog
      :title="`${form._id ? '修改' : '添加'}预约信息`"
      :visible.sync="dialogFormVisible"
      width="500px"
    >
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item
          label="创建时间"
          :label-width="formLabelWidth"
          prop="time"
        >
          <el-input v-model="form.time" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="客户名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="联系电话"
          :label-width="formLabelWidth"
          prop="phone"
        >
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="报备来源"
          :label-width="formLabelWidth"
          prop="source"
        >
          <el-input v-model="form.source" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="有效期"
          :label-width="formLabelWidth"
          prop="indate"
        >
          <el-input v-model="form.indate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="状态"
          :label-width="formLabelWidth"
          prop="usestate"
        >
          <el-select
            v-model="form.usestate"
            placeholder="请选择"
            align="center"
          >
            <el-option label="生效中" value="生效中"></el-option>
            <el-option label="已确认" value="已确认"></el-option>
            <el-option label="已过期" value="已过期"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import {reqReservationInfo} from '@/api'
export default {
  name: "appointreport",
  data() {
    return {
      formInline: {
        indate: "",
        name: "",
        usestate: "",
      },
      formLabelWidth: "100px",
      dialogFormVisible: false,
      tableData: [], //预约客户信息
      form: {
        time: "",
        name: "",
        phone: "",
        source: "",
        indate: "",
        usestate: "",
      },
      currentPage4: 1,
      // 表单验证的规则(有需要要进行验证的字段)
      rules: {
        time: [
          {
            required: true,
            min: 8,
            max: 10,
            message: "请输入正确的时间",
            trigger: "change",
          },
        ],
        name: [
          { required: true, message: "请输入预约客户姓名", trigger: "change" },
        ],
        phone: [
          {
            required: true,
            message: "请输入客户预留手机号",
            trigger: "change",
            min: 11,
            max: 11,
          },
        ],
        source: [
          {
            required: true,
            message: "请输入上报来源",
            trigger: "change",
            min: 2,
            max: 5,
          },
        ],
        indate: [
          {
            required: true,
            message: "请输入有效期",
            trigger: "change",
            min: 5,
            max: 10,
          },
        ],
        usestate: [
          {
            required: true,
            message: "请输入生效状态",
            trigger: "change",
            min: 3,
            max: 3,
          },
        ],
      },
    };
  },
  mounted() {
    this.getReservationInfo();
  },
  methods: {
    //获取所有预约用户信息
    async getReservationInfo() {
      let result = await this.$API.reqReservationInfo();
      this.tableData = result.data;
    },

    //查找用户获取对应信息
    async searchUser() {
      let result = await this.$API.findReservation(this.formInline);
      if (result.code === 200) {
        this.$message.success("搜索成功");
      } else {
        this.$message.error("搜索失败,找不到该用户");
      }
      this.tableData = result.data;
      //清空选项框
      this.formInline = {
        indate: "",
        name: "",
        usestate: "",
      };
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    //点击按钮添加
    isShowAdd() {
      this.dialogFormVisible = true;
      this.form = {
        time: "",
        name: "",
        phone: "",
        source: "",
        indate: "",
        usestate: "",
      };
    },
    //点击按钮修改
    isShowUpdata(form) {
      this.dialogFormVisible = true;
      this.form = { ...form };
    },

    //点击确定添加或者修改
    addOrUpdateUser() {
      //表单验证
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          // 表单验证全都成功了
          let result;
          if (this.form._id) {
            // 修改
            result = await this.$API.updateReservation(this.form);
          } else {
            // 添加
            result = await this.$API.createReservation(this.form);
          }
          if (result.code === 200) {
            // 提示
            this.$message.success(
              `${this.form._id ? "修改" : "添加"}预约用户信息成功`
            );
            // 重新获取数据
            this.getReservationInfo();
            // 关闭对话框
            this.dialogFormVisible = false;
          } else {
            this.$message.error(
              `${this.form._id ? "修改" : "添加"}预约用户信息失败`
            );
          }
        }
      });
    },

    //点击删除按钮删除对应用户
    async detaleuser(_id) {
      //删除对应用户
      let result = await this.$API.deleteReservation({ _id });
      console.log(result);
      if (result.code === 200) {
        //更新数据
        this.getReservationInfo();
        this.$message.success("删除成功");
      } else {
        this.$message.error("删除失败");
      }
    },
  },
};
</script>

<style lang='less' rel='stylesheet/less' scoped>
.portContainer {
  padding: 20px;
  position: relative;
}
.block {
  margin-top: 20px;
}
</style>
